import {designPage} from "@peryl/react-compose";
import {Box, Button, i18n, Icon, PageCard, PageCardContent, Space} from "plain-design";
import './result-failure-page.scss';

export default designPage(() => {
  return () => (
    <PageCard className="result-failure-page">
      <PageCardContent>
        <div className="result-failure-page-content">
          <Icon className="result-failure-page-icon" icon="pi-check-circle-fill" status="error"/>
          <span className="result-failure-page-title">{i18n.$intl('page.resultFailurePage.title').d('提交失败')}</span>
          <span className="result-failure-page-message">{i18n.$intl('page.resultFailurePage.message').d('请核对并修改以下信息后，再重新提交。')}</span>
          <Space className="result-failure-page-button-bar">
            <Button label={i18n.$intl('page.resultFailurePage.button.back').d('返回修改')} mode="fill"/>
          </Space>
          <Box className="result-failure-page-detail padding">
            <div>{i18n.$intl('page.resultFailurePage.detailTitle').d('您提交的内容有如下错误')}:</div>
            <div><Icon icon="pi-close-circle"/><span>{i18n.$intl('page.resultFailurePage.detailMessage1').d('您的账户已被冻结')}</span><Button mode="text"><span>{i18n.$intl('page.resultFailurePage.detailButton1').d('立即解冻')}</span><Icon icon="pi-right"/></Button></div>
            <div><Icon icon="pi-close-circle"/><span>{i18n.$intl('page.resultFailurePage.detailMessage2').d('您的账户还不具备申请资格')}</span><Button mode="text"><span>{i18n.$intl('page.resultFailurePage.detailButton2').d('立即升级')}</span><Icon icon="pi-right"/></Button></div>
          </Box>
        </div>
      </PageCardContent>
    </PageCard>
  );
});
